<template>
  <div class="main-input" :style="getFont">
    <textarea :style="{textAlign: align}" class="text" rows="1" v-model="text" :placeholder="hint"
              ref="input"></textarea>
  </div>
</template>

<script>
export default {
  name: 'RInput',
  data () {
    return {
      text: ''
    }
  },
  props: ['value', 'fontSize', 'fontWeight', 'hint', 'align', 'lisVal'],
  created () {
    this.text = this.value
  },
  methods: {
    getHeight (el) {
      setTimeout(() => {
        el.style.height = 'auto'
        el.style.height = (el.scrollHeight) + 1 + 'px'
      }, 0)
    }
  },
  computed: {
    getFont () {
      return {'font-size': this.fontSize, 'font-weight': this.fontWeight}
    }
  },
  watch: {
    value: function (newVal) {
      this.text = newVal
    },
    text: function (newVal) {
      newVal = newVal || null
      this.getHeight(this.$refs.input)
      this.$emit('input', newVal)
    },
    '$store.state.globalStyle.baseStyle.fontSize': function () {
      this.getHeight(this.$refs.input)
    },
    lisVal: function () {
      this.getHeight(this.$refs.input)
    }
  }
}
</script>

<style scoped lang="less">
  .main-input {
    width: 100%;
    display: flex;
    align-items: center;

    .text {
      resize: none;
      background: none;
      width: 100%;
      border: none;
      overflow: hidden;
      color: inherit;
      font: inherit;

      &:focus {
        background: rgba(246, 246, 246, 0.8);
        outline: none;
      }
    }
  }

</style>
